<template>
  <div class="dashboard-container1">
    <vue-particles color="#212121" />
    <el-row style="justify-content: center; height: 100%;   flex-direction: row;position:relative;z-index:999;">
      <el-col style="min-width: 400px;height: 100%; width: 1200px;">
        <el-card style="height: 100%; overflow-y: auto;">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="个人信息" name="first">
              <el-row style="display: flex; justify-content: center; align-items: center;">
                <el-tooltip class="item" effect="dark" content="点击修改头像" placement="right" @click.stop>
                  <img :src="userinfo.sysUser.headUrl" style="cursor: pointer;" class="user-avatar" @click="dialogVisible=true">
                </el-tooltip>
              </el-row>
              <el-row style="display: flex; justify-content: center; align-items: center; margin-top: 15px">
                <a style="font-size: 40px"><i v-if="userinfo.sysUser.gender==1" class="el-icon-male" style="color: royalblue;" /><i v-if="userinfo.sysUser.gender==0" class="el-icon-female" style="color: red;" /></a>
              </el-row>
              <el-row style="display: flex; justify-content: center; align-items: center;">
                <h1>{{ userinfo.sysUser.username }}</h1>
              </el-row>
              <el-row style="display: flex; justify-content: center; align-items: center;">
                <el-button size="mini" type="danger" @click="logout">退出登录</el-button>
              </el-row>
              <el-divider />
              <el-row style="display: flex; justify-content: center; align-items: center;">
                <el-row style="text-align: left;">
                  <el-col style="width: 300px">
                    <i class="el-icon-message" /> :{{ userinfo.sysUser.phone }}
                    <el-divider />
                    <i class="el-icon-phone-outline" />  :{{ userinfo.sysUser.description }}
                    <el-divider />
                    <i class="el-icon-finished" /> :{{ userinfo.sysUser.createTime }}
                    <el-divider />
                  </el-col>
                </el-row>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="个人信息修改" name="second">
              <el-form ref="userFormRef" :model="userinfo.sysUser" :rules="rules" size="medium" label-width="100px">
                <el-form-item label="用户名：" prop="username">
                  <el-input
                    v-model="userinfo.sysUser.username"
                    placeholder="请输入用户名"
                    :maxlength="11"
                    show-word-limit
                    clearable
                    prefix-icon="el-icon-user-solid"
                    :style="{width: '100%'}"
                  />
                </el-form-item>
                <el-form-item label="性别：" prop="gender">
                  <el-row style="text-align: left;">
                    <el-radio-group v-model="userinfo.sysUser.gender">
                      <el-radio :label="1">男</el-radio>
                      <el-radio :label="0">女</el-radio>
                    </el-radio-group>
                  </el-row>
                </el-form-item>
                <el-form-item label="座右铭：" prop="description">
                  <el-input
                    v-model="userinfo.sysUser.description"
                    type="textarea"
                    placeholder="请输入个性签名：不超过20个字符"
                    :maxlength="40"
                    :autosize="{minRows: 4, maxRows: 4}"
                    :style="{width: '100%'}"
                  />
                </el-form-item>
                <el-form-item label="手机号：" prop="phone">
                  <el-input
                    v-model="userinfo.sysUser.phone"
                    placeholder="请输入手机号"
                    show-word-limit
                    clearable
                    prefix-icon="el-icon-phone"
                    :style="{width: '100%'}"
                  />
                </el-form-item>
                <el-form-item size="large">
                  <el-button type="primary" @click="upUserInfo">确认修改</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>

            <el-tab-pane label="密码修改" name="third">
              <el-form ref="upPasswordDto" :model="upPasswordDto" :rules="loginRules" label-width="100px" auto-complete="on" label-position="left">
                <el-form-item label="旧密码：" prop="oldPassword">
                  <el-input
                    ref="password"
                    v-model="upPasswordDto.oldPassword"
                    show-password
                    placeholder="请输入旧密码！"
                    name="password"
                    tabindex="2"
                    auto-complete="on"
                  />
                </el-form-item>

                <el-form-item label="新密码：" prop="password">
                  <el-input
                    ref="password"
                    v-model="upPasswordDto.password"
                    show-password
                    placeholder="请设置新密码！"
                    name="password"
                    tabindex="2"
                    auto-complete="on"
                  />
                </el-form-item>

                <el-form-item label="新密码：" prop="checkPass">
                  <el-input
                    ref="checkPass"
                    v-model="upPasswordDto.checkPass"
                    show-password
                    placeholder="请再次输入新密码！"
                    name="password"
                    tabindex="2"
                    auto-complete="on"
                  />
                </el-form-item>
                <el-row>
                  <el-col :span="7">
                    <el-form-item label="验证码:" prop="captcha">
                      <el-input ref="captcha" v-model="upPasswordDto.captcha" placeholder="请输入验证码" name="captcha" type="text" tabindex="1" auto-complete="on" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="3">
                    <a
                      href="javascript:void(0)"
                      @click="createCode()"
                    ><img
                      :src="verifitycode"
                      style="margin-left: 15px; margin-top: 0px; height: 40px"
                      alt="图片加载失败"
                    ></a>
                  </el-col>
                </el-row>
                <el-button type="primary" style="width: 100%; margin-bottom: 10px" @click.native.prevent="resetPassword">重置密码</el-button>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog
      title="头像修改"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-row style="display: flex; justify-content: center; align-items: center;">
        <el-upload
          v-loading.fullscreen.lock="fullscreenLoading"
          class="avatar-uploader"
          action="/service-system/admin/upload"
          :show-file-list="false"
          :on-success="handleSuccess"
          :before-upload="beforeAvatarUpload"
          :on-progress="onUpload"
        >
          <img v-if="userinfo.sysUser.headUrl" :src="userinfo.sysUser.headUrl" :style="active" class="user-avatar" @mouseover="yr">
          <i v-else class="el-icon-plus avatar-uploader-icon" :src="userinfo.sysUser.headUrl" :style="active" />
        </el-upload>
      </el-row>
      <el-row style="display: flex; justify-content: center; align-items: center;">
        <el-button type="primary" :loading="upheadurling" style="margin-top: 15px" @click="upheadurl()">确认修改头像</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { getBaseInfo, resetPassword, upuserinfo } from '@/api/user'

export default {
  data() {
    const validateUsername = (rule, value, callback) => {
      if (value.length < 5) {
        callback(new Error('请输入5位以上的用户名！'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('请输入6位以上的密码！'))
      } else {
        callback()
      }
    }
    var checkPass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入6位数以上的密码'))
      } else if (value !== this.upPasswordDto.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      verifitycode: '',
      loginRules: {
        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
        oldPassword: [{ required: true, trigger: 'blur', validator: validatePassword }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }],
        checkPass: [{ required: true, trigger: 'blur', validator: checkPass }],
        captcha: [{ required: true, min: 4, max: 4, message: '请输入4位验证码', trigger: 'blur' }]
      },
      userinfo: {
        sysUser: {}
      },
      activeName: 'first',
      dialogVisible: false,
      uploading: false,
      fullscreenLoading: false,
      upheadurling: false,
      upPasswordDto: {
        captcha: '',
        password: '',
        checkPass: '',
        oldPassword: ''
      },
      genderOptions: [{
        'label': '男',
        'value': 1
      }, {
        'label': '女',
        'value': 0
      }],
      rules: {
        username: [{
          required: true,
          message: '请输入用户名',
          trigger: 'blur'
        }],
        gender: [{
          required: true,
          message: '性别：不能为空',
          trigger: 'change'
        }],
        description: [{
          required: true,
          message: '请输入个性签名：不超过20个字符',
          trigger: 'blur'
        }],
        phone: [{
          required: true,
          message: '请输入手机号',
          trigger: 'blur'
        }, {
          pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
          message: '手机号格式错误！',
          trigger: 'blur'
        }]
      }
    }
  },

  // 生命周期函数：内存准备完毕，页面尚未渲染
  created() {
    this.getBaseInfo()
    this.createCode()
  },

  // 生命周期函数：内存准备完毕，页面渲染成功
  mounted() {

  },
  methods: {
    logout(){
      this.$store.dispatch('user/logout').then(() => {
        this.$router.push(`/login?redirect=${this.$route.fullPath}`)
      })
    },
    resetPassword() {
      this.$refs.upPasswordDto.validate((valid) => {
        if (valid) {
          resetPassword(this.upPasswordDto).then((response) => {
            this.createCode()
            if (response.code === 200) {
              this.logout()
              this.$notify({
                title: '密码修改成功！',
                message: response.message,
                type: 'info'
              })
            }else {
              this.$notify.error({
                title: '错误',
                message: response.message,
                type: 'error'
              })
            }
          })
        }
      })
    },
    upheadurl() {
      this.upheadurling = true
      this.$notify({
        title: '进度提示',
        message: '正在修改头像请稍后！',
        type: 'info'
      })
      upuserinfo(this.userinfo.sysUser).then((response) => {
        this.timer = setTimeout(() => {
          if (response.code === 200) {
            this.upheadurling = false
            this.dialogVisible = false
            this.$notify({
              title: '成功',
              message: '头像更新成功',
              type: 'success'
            })
          } else {
            this.upheadurling = false
            this.$notify.error({
              title: '错误',
              message: '头像更新失败'
            })
          }
        }, 1200)
      })
    },
    createCode() {
      this.verifitycode = '/service-system/admin/captch/' + Date.now()
    },
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    upUserInfo() {
      this.$refs['userFormRef'].validate((valid) => {
        if (valid) {
          this.uploading = true
          upuserinfo(this.userinfo.sysUser).then((response) => {
            this.timer = setTimeout(() => {
              if (response.code === 200) {
                this.uploading = false
                this.$notify({
                  title: '成功',
                  message: '个人信息更新成功',
                  type: 'success'
                })
              } else {
                this.uploading = false
                this.$notify.error({
                  title: '错误',
                  message: '个人信息修改失败'
                })
              }
            }, 1200)
          })
        }
      })
    },
    getBaseInfo() {
      getBaseInfo().then(rsp => {
        this.userinfo = rsp.data
        console.log(this.userinfo)
      })
    },
    handleSuccess(response, file, fileList) {
      this.userinfo.sysUser.headUrl = response.data
      this.fullscreenLoading = false
      this.$message.success('上传成功')
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'

      const isLt2M = file.size / 1024 / 1024 < 1
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 jpg 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    handleClick() {},
    yr() {
      this.active = 'color:blue'
    }
  }
}
</script>
<style lang="scss" scoped>
#particles-js{
  width: 100%;
  height: calc(100% - 100px);
  position: absolute;   //设置absolute,其他DIV设置为relative，这样这个例子效果就作为背景
}
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.dashboard-container1 {
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: #99dee9;
}
.user-avatar {
  width: 180px;
  height: 180px;
  border-radius: 100px;
  margin-top: 5px;
}
.avatar :hover {
  width: 178px;
  height: 178px;
  display: block;

}
.avatar:hover{
  transform: scale(1.05);
  transition: all 0.2s linear;
}
</style>
